<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图技术</title>
    <style>
      /* 
        精灵图技术
        使用背景来呈现的图片的方式,跟传统的img呈现图片的方式具有本质的区别:
        1.传统的img显示图片的原理是浏览器发送请求到服务器获取图片资源,所以,一个img标签就会请求一次
        图片较多时,页面就会发送多次请求获取不同的图片资源,费时费力,性能不高
        
        2.精灵图技术是把需要用到的图片整合在一张图片上,使用背景来呈现,请求的次数就实现了多合一,只需要
        发送一次请求就能获取到所有需要的图片,提高了性能,加快了页面的相应速度

        操作步骤:
        1.绘制图片显示区域
        2.使用背景显示图片
        3.移动背景,直到显示区域和背景图中的图片吻合
        注意: 移动一般都是负数(向左和向上

        注意: 所有的测量都要保证是100%的比例下

        复杂情况:
        要显示的图片在精灵图的中部位置(不是贴边的)
        要显示的图片大小和窗口大小不一致
      */
      #div1 {
        width: 190px;
        height: 266px;
        /* 背景图片向左移动380像素 */
        background: url(img/sprite.png) -380px 0 no-repeat;
      }

      /*  要显示的图片大小和窗口大小不一致,处理方式,背景图片的尺寸和移动的距离都等比放大或者缩小即可 */
      #div2 {
        width: 380px;
        height: 532px;
        background: url(img/sprite.png) -760px 0/1140px no-repeat;
      }

      #div3 {
        width: 90px;
        height: 133px;
        background: url(img/sprite.png) -190px 0/285px no-repeat;
      }

      #div4 {
        width: 32px;
        height: 32px;
        background: url(img/sprite.webp) -156px -105px no-repeat;
      }

      #div5 {
        width: 84px;
        height: 84px;
        background: url(img/sprite.webp) -384px -127px/806px no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <br />
    <div id="div2"></div>
    <br />
    <div id="div3"></div>
    <br />
    <div id="div4"></div>
    <br />
    <div id="div5"></div>
  </body>
</html>
